import 'package:flutter/material.dart';

class MyApp10 extends StatelessWidget {
  // 2. 设置默认值
  const MyApp10({
    super.key,
    this.title = '',
    this.content = '',
    this.tColor = Colors.orange,
    this.cColor = Colors.yellow,
  });

  // 1. 定义属性
  final String title;
  final String content;
  final Color tColor;
  final Color cColor;

  // 重写build 返回需要封装的组件即可
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purple,
          title: Center(
            child: Text(
              '标题为:$title',
              style: TextStyle(
                  color: tColor, fontSize: 30, fontWeight: FontWeight.w900),
            ),
          ),
        ),
        // 1.2 主体部分
        body: const MyContainer(),
      ),
    );
  }
}

class MyContainer extends StatelessWidget {
  const MyContainer({super.key});

  @override
  Widget build(BuildContext context) {
    Map data = {
      "createTime": "2024-08-15 21:49:48",
      "orderState": 2,
      "image":
          "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
      "name": "茶水分离杯耐热隔热玻璃杯,茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
      "totalNum": 2,
      "curPrice": 119.5,
      "totalMoney": 119.5,
      "attrsText": "规格:白色240ml"
    };
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        // 1. 时间+待发货
        Container(
          height: 50,
          padding: EdgeInsets.all(10),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 时间
              Text(
                data['createTime'],
                style: const TextStyle(fontSize: 20),
              ),
              // 待发货
              Text(
                data['orderState'] == 2 ? '待发货' : '已发货',
                style: const TextStyle(
                    fontSize: 20,
                    color: Colors.orange,
                    fontWeight: FontWeight.w900),
              )
            ],
          ),
        )
        // 2.商品的信息
        ,
        Container(
          padding: const EdgeInsets.all(10),
          child: Row(
            children: [
              // 左侧图片
              Image.network(
                data['image'],
                width: 150,
              ),
              // 右侧的信息
              Expanded(
                  child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 名字+数量
                  Row(
                    children: [
                      Expanded(
                          child: Text(
                        data['name'],
                        style: const TextStyle(fontSize: 20),
                      )),
                      const Text(
                        'x2',
                        style: TextStyle(fontSize: 20),
                      )
                    ],
                  ),
                  // 规格
                  Container(
                      padding: const EdgeInsets.all(10),
                      child: Text(
                        data['attrsText'],
                        style: const TextStyle(color: Colors.grey),
                      )),
                  // 单价
                  Container(
                      padding: EdgeInsets.all(10),
                      child: Text(
                        '¥${data['totalMoney']}',
                        style: const TextStyle(
                            fontWeight: FontWeight.w900, fontSize: 20),
                      ))
                ],
              ))
            ],
          ),
        )
        // 合计
        ,
        Container(
          padding: EdgeInsets.all(10),
          child: Text('合计¥${data['curPrice'] * data['totalNum']}'),
        ),
        // 再次购买
        Container(
          padding: const EdgeInsets.all(5),
          decoration: BoxDecoration(border: Border.all()),
          child: const Text('再次购买'),
        )
      ],
    );
  }
}
